<!---->
<template>
    <div>
         <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="margin:10px auto"></div>

         <!-- 搜索筛选 -->
        <el-form :inline="true" :model="search"  class="user-search">
            <el-form-item label="搜索：">
                <el-date-picker
                size="small"
                  v-model="search.time"
                  type="date"
                  :value-format="format"
                  placeholder="选择开始日期">
                </el-date-picker>
            </el-form-item>
             <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
            </el-form-item>
        </el-form>


           <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading"  element-loading-text="拼命加载中" style="width: 100%;">
             <el-table-column
            fixed
            width="250px"
              prop="oid"
              label="订单号">
              <template slot-scope="scope">
                        <span style="font-size:16px">{{scope.row.oid}}</span>
              </template>
            </el-table-column>

            <el-table-column
            
            width="200px"
              prop="pname"
              label="商品名">
              <template slot-scope="scope">
                        <span style="color:blue">{{scope.row.pname}}</span>
              </template>
            </el-table-column>
            

            <el-table-column
           width="200px"
              prop="pimage"
              label="商品图片">
               <template slot-scope="scope">
                         <el-image
                            @click="imageClick(scope.row.pimage)"
                            style="width: 100px; height: 100px"
                            :src="url+scope.row.pimage" 
                            fit="contain"></el-image>
              </template>
          </el-table-column>
            
          <el-table-column
            
            width="100px"
              prop="quantity"
              label="数量">
            </el-table-column>

            <el-table-column
            
            width="100px"
              prop="total"
              label="金额">
              <template slot-scope="scope">
                        <span style="color:red">{{scope.row.total}}￥</span>
              </template>
            </el-table-column>

          <el-table-column
            
            width="150px"
              prop="ordertime"
              label="订单时间">
            </el-table-column>

          <el-table-column
            
            width="150px"
              prop="name"
              label="收货人">
            </el-table-column>

            <el-table-column
            
            width="150px"
              prop="telephone"
              label="手机">
            </el-table-column>

            <el-table-column
            
            width="200px"
              prop="address"
              label="地址">
            </el-table-column>


        <el-table-column
            width="200px"
            label="操作"
            >
            <template slot-scope="scope">
                <el-button  @click="editClick(scope.row)" type="danger" size="small"><i class="el-icon-edit"/>编辑订单</el-button>
            </template>
        </el-table-column>
            
         
        
           
    </el-table>

    <!--弹窗-->
    <el-dialog title="编辑" :visible.sync="FormVisible" width="30%" @click="FormVisible == true">
  
      
      <el-form label-width="80px" :model="Form"  ref="editForm">
        <el-form-item label="收货人" >
          <el-input size="small" clearable v-model="Form.name" auto-complete="off" placeholder="请输入商品名"></el-input>
        </el-form-item>
        <el-form-item label="电话" >
          <el-input size="small" clearable v-model="Form.telephone" auto-complete="off" placeholder="products/1/xxx"></el-input>
        </el-form-item>
        <el-form-item label="收获地址" >
          <el-input type="textarea"
        :rows="2"  v-model="Form.address" auto-complete="off" ></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        
        <el-button   type="primary"  class="title" @click="submitForm()">保存</el-button>
      </div>
    </el-dialog>

    </div>
</template>
<script>
export default {
    data() {
        return {
          Form:{
            oid:'',
            name:'',
            address:'',
            telephone:''
          },
          search:{
            time:'',
            },
            url:"http://localhost:8080/api/",
            listData:[],
            loading:false,
            format:"yyyy-MM-dd",
            FormVisible:false
        }
    },
    created(){
        this.getList();
    },
    methods: {
      submitForm(){ //保存
          this.$api.post('/orders/editOrders',this.Form,res=>{
            this.FormVisible = false
               this.getList();
               this.$message.success("修改成功！")
          })
      },
      editClick(data){       //编辑
          this.FormVisible = true
          this.Form.oid = data.oid;
          this.Form.name  = data.name
          this.Form.address  = data.address
          this.Form.telephone  = data.telephone
      },
         imageClick(urls){
             var url = this.url + urls ;
             window.open(url,'_blank');
         },
        getList(){
            this.loading = true
            console.log(this.search.time)
             this.$api.post("/orders/findOrdersAndProduct",this.search,Response=>{
                        this.listData=Response.data.data;
                })
            setTimeout(() => {
                this.loading = false
            }, 500);
        }
    },
}
</script>
<style scoped>

</style>